<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-default n-header" role="navigation">
        <div class="container-fluid n-header-wrap">
          <a class="navbar-brand jx-logo" href="">
              <img src="./img/logo2.jpg" alt="StudentDenglu">
          </a>
           <div class="navbar-btn">
               <ul class="nav navbar-nav nav-items">
                   <li>
                       <a class="nav-item" href="#" data-toggle="modal" data-target="#infoModal" >
                           <span>消息</span>
                       </a>
                   </li>
                   <li>
                        <a class="nav-item" href="#" data-toggle="modal" data-target="#btnModal">
                            <span>设置</span>
                        </a>
                   </li>
                   <li class="dropdown">
                        <a class="nav-item dropdown-toogle" href="#" data-toggle="dropdown" aria-expanded="false">
                            <span>安全退出</span>
                            <b class="caret"></b>
                        </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="./login.html">退出</a>
                                </li>
                                <li>
                                    <a href="#">注销</a>
                                </li>
                                <li>
                                    <a href="#">切换账号</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">帮助</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    <div style="clear: both;"></div>
    <!--顶部导航栏结束-->
    <div class="body">
    <div class="container-fluid body-content">
        <div class="row body-row">
          <div class="col-md-2 col-lg-2 left">
              <div class="left-header">
                  <span>
                      当前用户:
                  </span>
                </div>
          </div>
          <div class="col-md-10 col-lg-2 right"></div>
        </div>
      </div>
    </div>
    <!--消息 Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="infoModalLabel">消息</h4>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                    <a href="#">
                        【系统消息】吴亦凡送您一个Surprise！
                    </a> 
                </li>
                <li>
                    <a href="#">
                        【系统消息】易烊千玺向您发来一条消息！
                    </a>
                </li>
                <li>
                    <a href="#">
                        【系统消息】ipone官方送您一部ipone11！
                    </a>
                </li>
            </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
   <!--消息 Modal -->
<div class="modal fade" id="btnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="btnModalLabel">系统设置</h4>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                    <input type="checkbox" name="" id=""> 
                </li>
                <li>
                    <input type="checkbox" name="" id="">
                </li>
                <li>
                    <input type="checkbox" name="" id=""> 
                </li>
            </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <script>
      $(function(){
          var uname = localStorage.getItem('USERID');
          $('.left').html(uname);
      })
  </script>
</body>

</html>